<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeChat Notice 演示站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }

        .qr-section {
            background: white;
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 20px;
            margin-top: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 5px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 40px;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }

        .qr-content {
            flex: 1;
        }

        .qr-content h2 {
            margin-bottom: 10px;
            color: #333;
            font-size: 1.5rem;
        }

        .qr-content p {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }

        .qr-image {
            flex-shrink: 0;
        }

        .qr-placeholder {
            width: 150px;
            height: 150px;
            border: 2px dashed #c8d3f0;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
            color: #667eea;
            font-size: 12px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .qr-placeholder img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 10px;
        }

        .qr-placeholder:hover {
            border-color: #667eea;
            background: linear-gradient(135deg, #667eea30 0%, #764ba230 100%);
            transform: scale(1.02);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.2);
        }

        .qr-placeholder::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
            border-radius: 12px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .qr-placeholder:hover::before {
            opacity: 0.1;
        }

        .api-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .api-card {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .api-card h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.3rem;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-group textarea {
            height: 80px;
            resize: vertical;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: transform 0.2s, box-shadow 0.2s;
            width: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            font-size: 13px;
            white-space: pre-wrap;
        }

        .result.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .result.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #666;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2rem;
            }

            .header p {
                font-size: 1rem;
            }

            .api-section {
                grid-template-columns: 1fr;
            }

            .qr-section {
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }

            .qr-content h2 {
                margin-bottom: 8px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🚀 WeChat Notice</h1>
        <p>企业微信消息通知组件演示站</p>
    </div>

    <div class="qr-section">
        <div class="qr-content">
            <h2>📱 微信扫码右侧二维码，加入企业并验证身份，即可体验</h2>
            <p>扫码关注企业微信应用，接收推送消息。支持文本、卡片、图文等多种消息格式</p><br/>
            <p>仅用于演示，请勿发送过多测试消息，退出即可不再接收消息。建议体验完之后退出企业</p>
        </div>
        <div class="qr-image">
            <div class="qr-placeholder">
                <img src="./qrcode.png" alt="应用二维码">
            </div>
        </div>
    </div>

    <div class="api-section">
        <!-- 文本消息 -->
        <div class="api-card">
            <h3>📝 文本消息</h3>
            <form id="textForm">
                <div class="form-group">
                    <label for="textContent">消息内容：</label>
                    <textarea id="textContent" placeholder="请输入要发送的文本消息..." disabled>Hello, 这是一条测试文本消息！</textarea>
                </div>
                <div class="form-group">
                    <label for="textToUser">接收用户：</label>
                    <input type="text" id="textToUser" placeholder="用户ID，多个用|分隔" value="@all" disabled>
                </div>
                <button type="submit" class="btn">发送文本消息</button>
            </form>
            <div id="textResult" class="result" style="display: none;"></div>
        </div>

        <!-- TextCard消息 -->
        <div class="api-card">
            <h3>🃏 TextCard消息</h3>
            <form id="textcardForm">
                <div class="form-group">
                    <label for="textcardTitle">标题：</label>
                    <input type="text" id="textcardTitle" placeholder="卡片标题" value="任务提醒" disabled>
                </div>
                <div class="form-group">
                    <label for="textcardDescription">描述：</label>
                    <textarea id="textcardDescription" placeholder="卡片描述内容" disabled>您有新的任务需要处理，请及时查看。</textarea>
                </div>
                <div class="form-group">
                    <label for="textcardUrl">链接URL：</label>
                    <input type="text" id="textcardUrl" placeholder="点击卡片跳转的URL" value="https://www.baidu.com" disabled>
                </div>
                <div class="form-group">
                    <label for="textcardToUser">接收用户：</label>
                    <input type="text" id="textcardToUser" placeholder="用户ID，多个用|分隔" value="@all" disabled>
                </div>
                <button type="submit" class="btn">发送TextCard消息</button>
            </form>
            <div id="textcardResult" class="result" style="display: none;"></div>
        </div>

        <!-- 图文消息 -->
        <div class="api-card">
            <h3>🖼️ 图文消息</h3>
            <form id="newsForm">
                <div class="form-group">
                    <label for="newsTitle">文章标题：</label>
                    <input type="text" id="newsTitle" placeholder="图文标题" value="重要公告" disabled>
                </div>
                <div class="form-group">
                    <label for="newsDescription">文章描述：</label>
                    <textarea id="newsDescription" placeholder="图文描述" disabled>这是一条重要的公告内容，请大家关注。</textarea>
                </div>
                <div class="form-group">
                    <label for="newsUrl">文章链接：</label>
                    <input type="text" id="newsUrl" placeholder="点击图文跳转的URL" value="https://www.fu520.top/" disabled>
                </div>
                <div class="form-group">
                    <label for="newsPicUrl">图片URL：</label>
                    <input type="text" id="newsPicUrl" placeholder="图片链接" value="https://www.fu520.top/upload/keqing.jpg" disabled>
                </div>
                <div class="form-group">
                    <label for="newsToUser">接收用户：</label>
                    <input type="text" id="newsToUser" placeholder="用户ID，多个用|分隔" value="@all" disabled>
                </div>
                <button type="submit" class="btn">发送图文消息</button>
            </form>
            <div id="newsResult" class="result" style="display: none;"></div>
        </div>
    </div>

    <div class="footer">
        <p>💡 提示：请确保后端服务已启动，并且企业微信应用配置正确</p>
        <p>📚 更多信息请参考项目文档</p>
    </div>
</div>

<script>
    // 基础配置
    const API_BASE = '/api/notification';

    // 通用请求函数
    async function sendRequest(url, data) {
        try {
            const formData = new FormData();
            Object.keys(data).forEach(key => {
                if (data[key] !== '') {
                    formData.append(key, data[key]);
                }
            });

            const response = await fetch(url, {
                method: 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            return await response.text();
        } catch (error) {
            console.error('请求失败:', error);
            throw error;
        }
    }

    // 显示结果
    function showResult(elementId, message, isSuccess = true) {
        const resultElement = document.getElementById(elementId);
        resultElement.textContent = message;
        resultElement.className = `result ${isSuccess ? 'success' : 'error'}`;
        resultElement.style.display = 'block';

        // 5秒后自动隐藏
        setTimeout(() => {
            resultElement.style.display = 'none';
        }, 5000);
    }

    // 设置按钮加载状态
    function setButtonLoading(button, loading = true) {
        if (loading) {
            button.disabled = true;
            button.textContent = '发送中...';
        } else {
            button.disabled = false;
            button.textContent = button.getAttribute('data-original-text');
        }
    }

    // 文本消息表单
    document.getElementById('textForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const button = e.target.querySelector('button');
        button.setAttribute('data-original-text', button.textContent);
        setButtonLoading(button);

        try {
            const result = await sendRequest(`${API_BASE}/send/text`, {
                content: document.getElementById('textContent').value,
                toUser: document.getElementById('textToUser').value
            });
            showResult('textResult', `✅ ${result}`, true);
        } catch (error) {
            showResult('textResult', `❌ 发送失败: ${error.message}`, false);
        } finally {
            setButtonLoading(button, false);
        }
    });

    // TextCard消息表单
    document.getElementById('textcardForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const button = e.target.querySelector('button');
        button.setAttribute('data-original-text', button.textContent);
        setButtonLoading(button);

        try {
            const result = await sendRequest(`${API_BASE}/send/textcard`, {
                title: document.getElementById('textcardTitle').value,
                description: document.getElementById('textcardDescription').value,
                url: document.getElementById('textcardUrl').value,
                toUser: document.getElementById('textcardToUser').value
            });
            showResult('textcardResult', `✅ ${result}`, true);
        } catch (error) {
            showResult('textcardResult', `❌ 发送失败: ${error.message}`, false);
        } finally {
            setButtonLoading(button, false);
        }
    });

    // 图文消息表单
    document.getElementById('newsForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const button = e.target.querySelector('button');
        button.setAttribute('data-original-text', button.textContent);
        setButtonLoading(button);

        try {
            const result = await sendRequest(`${API_BASE}/send/news`, {
                title: document.getElementById('newsTitle').value,
                description: document.getElementById('newsDescription').value,
                url: document.getElementById('newsUrl').value,
                picUrl: document.getElementById('newsPicUrl').value,
                toUser: document.getElementById('newsToUser').value
            });
            showResult('newsResult', `✅ ${result}`, true);
        } catch (error) {
            showResult('newsResult', `❌ 发送失败: ${error.message}`, false);
        } finally {
            setButtonLoading(button, false);
        }
    });

</script>
</body>
</html>
